<template>
	<view class="content" style="width:100%">
		<view class="main">
			<view class="sel" @click="getShow">
				<text style="color:#2ca8ff" v-if="value">{{value}}</text>
				<text v-else>{{placeholder}}</text>
				<uni-icons v-if="value&&!isshow" type="closeempty" color="#f7f7eb" size="10"  @click.native.stop="clear"/>
				<uni-icons v-else :type="isshow? 'top' : 'bottom'" size="14" color="#999" />
			</view>
			<!-- 三角 -->
			<view class="triangle" v-show="isshow"></view>
			<!-- 卡片内容 -->
			<view class="card" v-show="isshow">
				<view class="cardl"  v-for="(tagData,tagDataIndex) in tagList" :key="tagData.key">
					<view class="ca" v-for="(item,index) in tagData" :key="index">
						<text  @click="getData(item,tagDataIndex,index)" :style="{color:item.flag ? '#FFF' : ''}">{{item[props.label]}}</text>
						<image v-if="item[props.children]"  @click="dataPush(item[props.children],tagDataIndex,index)" src="./triangleright.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			separator:{
				type: String,
				default: '/',
			},
			options:{
				type: Array,
				default: [],
			},
			value:String,
			props:{
				type: Object,
				default: () => {
				  return {
					value:'value',
					label:'label',
					children:'children'
				 	}
				},
			},
			placeholder:{
				type: String,
				default: '请选择',
			}	
		},
		data() {
			return {
				tagList:[],
				isshow:false,//显示
				resultList:[],
			}
		},
		mounted(){
			this.tagList.push(this.options)
		},
		methods: {
			// 清空
			clear(){
				this.$emit('input','')
				this.$emit('change',[])
				this.resultList = []
				this.filterTagList()
			},
			// 清洗样式
			filterTagList(){
				this.tagList = this.tagList.map(item=>{
					return item.map(item1=>{
						if(item1.flag) item1.flag = false
						return item1
					})
				})
			},
			getShow(){//显示
				this.isshow = !this.isshow
			},
			getData(children,index,childIndex,multiplexing=false){
				this.tagList.splice(index+1,this.tagList.length-1)
				this.tagList[index]=this.tagList[index].map((element,indexE) => {
					indexE == childIndex ?  element.flag = true : element.flag =false
					return element
				});
				if(multiplexing) return 
				//整理数组 返回  标识 flag
			     this.resultList = this.tagList.reduce((prev,cur)=>{
					 const findData = cur.find(element=>element.flag)
					 prev.push(findData)
					 return prev
				},[])
				
				this.$emit('input',this.resultList.map((item)=>item[this.props.label]).join(this.separator))
				this.$emit('change', this.resultList)
				this.isshow = false
				console.log(this.resultList,'this.resultList');
				
			},
			dataPush(children,index,childIndex){
				// console.log(childIndex,'childIndex');
				
				this.getData(children,index,childIndex,true)
				
				this.$set(this.tagList,index+1,children)
			},


		}
	}
</script>
<style>
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main {
		width: 100%;
		height: 24px;
	}

	.main>.sel {
		width: 100%;
		height: 24px;
		border: 1px solid rgba(0, 209, 255, 0.5);
		border-radius: 3px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 5px;
		font-size: 28upx;
	}

	.main>.sel>text:nth-child(1) {
		font-size: 12px;
		/* width: 320upx; */
		height: 25px;
		line-height: 25px;
		color: #909399;
		margin-left: 20upx;
		flex-shrink: 0;
		width: 83%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.main>.sel>image {
		width: 50upx;
		height: 50upx;
	}

	/*三角  */
	.triangle {
		/* width: 0;
		height: 0;
		border-left: 20upx solid transparent;
		border-right: 20upx solid transparent;
		border-bottom: 20upx solid #c7c7c7;
		margin-left: 30upx;
		margin-top: 10upx; */
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 5px 7px;
		border-color: transparent transparent #2ca8ff;
		position: relative;
		margin-left: 30upx;
	}
	/* .triangle:after {
		content: '';
		border-style: solid;
		border-width: 0 40upx 40upx;
		border-color: transparent transparent #ffffff;
		position: absolute;
		top: 5upx;
		left: -40upx;
	} */


	/* 级联 */
	.card {
		width: 690upx;
		/* height: 320upx; */
		display: flex;
		position: relative;
    	z-index: 999;
		
	}

	/* 级联一 */
	.card>.cardl {
		width: 220upx;
		/* height: 320upx; */
		border: 1upx solid #2ca8ff;
		background-color:#022542 ;
		overflow-y: scroll;
		border-radius: 10upx;
	}
	.card>.cardl>.ca {
		width: 210upx;
		height: 60upx;
		margin: 5upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10upx;
	}
	.card>.cardl>.ca>text {
		width: 170upx;
		height: 60upx;
		line-height: 60upx;
		display: inline-block;
		font-size: 28upx;
		margin-left: 10upx;
		color: #2ca8ff;
		overflow-x: scroll;
	}

	.card>.cardl>.ca>image {
		width: 40upx;
		height: 40upx;
	}
	
	/* 级联一样式s */
	.card>.cardls {
		width: 220upx;
		height: 320upx;
		border: 1upx solid #dddddd;
		overflow-y: scroll;
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
		background-color:#022542 ;
	}

	.card>.cardls>.ca {
		width: 210upx;
		height: 60upx;
		margin: 5upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10upx;
	}

	.card>.cardls>.ca>text {
		width: 170upx;
		height: 60upx;
		line-height: 60upx;
		display: inline-block;
		font-size: 28upx;
		margin-left: 10upx;
		color: #787878;
		overflow-x: scroll;
	}

	.card>.cardls>.ca>image {
		width: 40upx;
		height: 40upx;
	}

	/* 级联二 */
	.card>.cardc {
		width: 220upx;
		height: 320upx;
		border-top: 1upx solid #dddddd;
		border-bottom: 1upx solid #dddddd;
		border-right: 1upx solid #dddddd;
		background-color:#022542 ;
		overflow-y: scroll;
	}

	/* 去除滚动条 */
	.card>.cardc::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.card>.cardc>.ca {
		width: 210upx;
		height: 60upx;
		margin: 5upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10upx;
	}

	.card>.cardc>.ca>text {
		width: 170upx;
		height: 60upx;
		line-height: 60upx;
		display: inline-block;
		font-size: 28upx;
		margin-left: 10upx;
		color: #787878;
		overflow-x: scroll;
	}

	/* 滚动条 */
	.card>.cardc>.ca>text::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.card>.cardc>.ca>image {
		width: 40upx;
		height: 40upx;
	}

	/* 级联三 */
	.card>.cardr {
		width: 220upx;
		height: 320upx;
		border-top: 1upx solid #dddddd;
		border-bottom: 1upx solid #dddddd;
		border-right: 1upx solid #dddddd;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
		overflow-y: scroll;
		background-color:#022542 ;
	}

	/* 去除滚动条 */
	.card>.cardr::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.card>.cardr>.ca {
		width: 200upx;
		height: 60upx;
		line-height: 60upx;
		margin: 5upx 0;
		font-size: 28upx;
		margin-left: 20upx;
		color: #787878;
		overflow-x: scroll;
	}

	/* 去除滚动条 */
	.card>.cardr>.ca::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
</style>